<template>
  <div class="docViewer">
    <div class="pageWrapper">
    </div>
    <scrollbar orientation="vertical"></scrollbar>
    <scrollbar orientation="horizontal"></scrollbar>
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Scrollbar from "./Scrollbar.vue";
import DocViewScrollHelper from "./DocViewScrollHelper";
import DocViewSizeHelper from "./DocViewSizeHelper";
import WheelHandler from "./Wheelhandler";
import { getWheelEventType } from "./vendor/normalizeWheel";
import DOMMouseMoveTracker from "./vendor/DOMMouseMoveTracker";

@Component({
  components: {
    Scrollbar
  }
})
export default class DocView extends Vue {
  private $container;
  private _scrollHelper: DocViewScrollHelper;
  private _sizeHelper: DocViewSizeHelper;
  private $pageWrapper;
  private _rowBuffer;
  private _rowsCount;
  private _wheelHandler: WheelHandler;
  private _mouseMoveTracker: DOMMouseMoveTracker;
  private _vScrollbar;
  private _hScrollbar;
  private _startZoom;
  private namespace = ".docview";
  private _curPageIndex = 0;
  private _minZoom: number = 0.01;
  private state: {
    scrollY: number;
    scrollX: number;
    isScrolling: boolean;
    rowsToRender: any;
    bodyWidth: any;
    bodyHeight: number;
    firstRowIndex: number;
    firstRowOffset: number;
    maxScrollY: number;
    maxScrollX: number;
    scrollContentHeight: number;
    scrollContentWidth: number;
    timingIndex: number;
    zoom: number;
  };
}
</script>
<style scoped>
.docViewer {
  background: rgb(221, 222, 223);
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pageWrapper {
  width: 100%;
}

.fwr-page {
  margin: 0 auto;
  position: relative;
  /*border: 1px solid red;*/
}
</style>
